<template>
  <div class="Schedule-container app-container">
    <FullCalendar class='demo-app-calendar' ref="fullCalendar" defaultView="dayGridMonth" :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }" :plugins="calendarPlugins" :weekends="calendarWeekends" :events="calendarEvents"
      @dateClick="handleDateClick" locale='zh-cn' @eventClick='eventClick' :buttonText='buttonText'
      height='parent' :eventLimit='true' allDayText='全天' :editable='true'
      @datesRender="datesRender" />
    <!-- :dayNamesShort='dayNamesShort' :dayNames='dayNamesShort' axisFormat='HH:mm' timeFormat='HH:mm' -->
    <Form v-if="formVisible" ref="Form" @refreshDataList="refreshDataList" />
  </div>
</template>
<script>
import { AppDayList, AppList, List } from '@/api/extend/schedule'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import bootstrapPlugin from '@fullcalendar/bootstrap';
import Form from './Form'
export default {
  name: 'extend-schedule',
  components: {
    FullCalendar,
    Form
  },
  data() {
    return {
      formVisible: false,
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        bootstrapPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [],
      buttonText: { today: "今日", month: "月", week: "周", day: "日", list: "日程" },
      dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      titleFormat: { year: 'numeric', month: '2-digit' },
      columnHeaderFormat: [
        'ddd',    // Mon
        'MM月dd日 ddd', // Mon 9/7
        'MM月dd日 ddd'  // Monday 9/7
      ],
      startTime: '',
      endTime: '',
    }
  },
  created() { },
  mounted() {
    // let calendarApi = this.$refs.fullCalendar.getApi()
    // console.log(calendarApi);
  },
  methods: {
    datesRender(calendar) {
      let view = calendar.view
      this.startTime = this.jnpf.toDate(view.activeStart, "yyyy-MM-dd HH:mm")
      this.endTime = this.jnpf.toDate(view.activeEnd, "yyyy-MM-dd HH:mm")
      this.initData()
    },
    handleDateClick(arg) {
      let startTime = this.jnpf.toDate(arg.date, "yyyy-MM-dd HH:00"),
        clickTime = this.jnpf.toDate(arg.date, "yyyyMMdd"),
        currTime = this.jnpf.toDate(new Date(), "yyyyMMdd");
      if (clickTime < currTime) return
      if (clickTime == currTime) {
        let thisDate = new Date();
        thisDate.setHours(thisDate.getHours() + 1);
        startTime = this.jnpf.toDate(thisDate, "yyyy-MM-dd HH:00");
      }
      this.addOrUpdateHandle('', startTime)
      this.addOrUpdateHandle('', new Date(startTime).getTime())
    },
    eventClick(data) {
      if (this.jnpf.toDate(data.event.start, "yyyyMMddHHmm") > this.jnpf.toDate(new Date(), "yyyyMMddHHmm")) {
        this.addOrUpdateHandle(data.event.id)
      }
    },
    initData() {
      // let query = {
      //   startTime: new Date(this.startTime).getTime(),
      //   endTime: new Date(this.endTime).getTime(),
      // }
      let query = {
        startTime: this.startTime,
        endTime: this.endTime,
      }
      List(query).then(res => {
        this.calendarEvents = res.data.list.map(o => ({
          id: o.id,
          title: o.content,
          start: o.startTime,
          end: o.endTime,
          color: o.colour,
          editable: false,
          allDay: false
        }))
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id, startTime) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.Form.init(id, startTime)
      })
    },
    refreshDataList() {
      this.formVisible = false
      this.initData()
    }
  }
}
</script>
<style lang='scss'>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/bootstrap/main.css';
.Schedule-container {
  background: #f7f5f0;
  border-radius: 16px;
  padding: 24px 28px 18px 28px;
  min-height: 80vh;
  box-shadow: 0 2px 12px 0 rgba(200, 180, 120, 0.08);
  border: 1px solid #f0e6d2;

  .fc-toolbar.fc-header-toolbar {
    padding: 16px 0 10px 0;
    margin-bottom: 0;
    background: #f6f3ea;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 4px 0 rgba(200, 180, 120, 0.06);
  }
  .fc-center {
    color: #a68c5a;
    font-weight: 600;
    font-size: 18px;
  }
  .fc-button-primary {
    background: #ffcf57;
    border-color: #e8d7b1;
    color: #fff;
    height: 32px;
    line-height: 32px;
    padding: 0 0.9em;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 500;
    box-shadow: none;
    transition: background 0.3s;
  }
  .fc-button-primary:not(:disabled):active,
  .fc-button-primary:not(:disabled).fc-button-active {
    background: #a68c5a;
    border-color: #e8d7b1;
    color: #fff;
  }
  .fc-button-primary:hover {
    background: #f3e7c9;
    color: #fff;
  }
  .fc-button .fc-icon {
    line-height: 16px;
  }
  .fc-unthemed th {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #a68c5a;
    font-weight: 500;
    background: #f3e7c9;
    border: 1px solid #6d5c36;
  }
  .fc-unthemed td {
    background: #f7f5f0;
    color: #6d5c36;
    font-size: 13px;
    border-color: #f4e1ab;
  }
  .fc-unthemed th,
  .fc-unthemed td,
  .fc-unthemed thead,
  .fc-unthemed tbody,
  .fc-unthemed .fc-divider,
  .fc-unthemed .fc-row,
  .fc-unthemed .fc-content,
  .fc-unthemed .fc-popover,
  .fc-unthemed .fc-list-view,
  .fc-unthemed .fc-list-heading td {
    border-color: #d3defa;
    color: #6d5c36;
  }
  .fc-event, .fc-event-dot {
    background: #ffe082 !important;
    border: none !important;
    color: #6d5c36 !important;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: 0 1px 4px 0 rgba(200, 180, 120, 0.06);
  }
  .fc-today {
    background: #fffde7 !important;
  }
  .fc-day-number, .fc-list-heading-main {
    color: #a68c5a;
    font-weight: 600;
  }
  .fc-list-item {
    background: #f7f5f0;
    border-radius: 6px;
    margin-bottom: 6px;
  }
  .fc-list-item-title {
    color: #6d5c36;
  }
  .fc-list-item-time {
    color: #a68c5a;
  }
}
</style>
